<template>
    <myDialog :visible="popupFlag">
        <div style="padding: 70px 0;">
            <div class="main" @click.stop>
                <div class="header flex">
                    <div class="title_box flex">
                        <img src="../../assets/fileFlow_label.png" style="margin-right: 10px;">
                        <p v-if="addFileForm.id">修改公文</p>
                        <p v-else>发布公文</p>
                    </div>
                    <el-icon @click="closeHandle">
                        <Close />
                    </el-icon>
                </div>

                <div class="contain" ref="myDiv">
                    <div class="contain_l">
                        <div class="myTitle">
                            <p>公文基本内容</p>
                            <div class="titleXian"></div>
                            <div class="titleXian1"></div>
                        </div>
                        <div class="input_box">
                            <p class="pTitle"><span class="star">*</span>来文标题</p>
                            <input type="text" placeholder="请填写来文标题" v-model="addFileForm.documentTitle">
                        </div>
                        <div class="row flex">
                            <div class="input_box">
                                <p class="pTitle"><span class="star">*</span>来文字号</p>
                                <input type="text" placeholder="请填写来文字号" v-model="addFileForm.documentNumber">
                            </div>
                            <div class="input_box">
                                <p class="pTitle"><span class="star">*</span>接收时间</p>
                                <el-config-provider :locale="locale">
                                    <el-date-picker v-model="addFileForm.receivedTime" type="date" placeholder="请选择接收时间"
                                        @change="changeTime" class="timePicker"
                                        style="width: 100%; height: 39px; background-color:red !important;  border-radius: 5px; outline:none !important;" />
                                </el-config-provider>
                            </div>
                        </div>
                        <div class="row flex">
                            <div class="input_box">
                                <p class="pTitle"><span class="star">*</span>统筹人</p>
                                <el-select v-model="addFileForm.coordinator" placeholder="请选择统筹人" size="large" clearable
                                    :class="{ 'select1': !addFileForm.coordinator, 'select2': addFileForm.coordinator }"
                                    disabled @change="changeTeacher1" ref="teacherTree">
                                    <template #header>
                                        <el-input v-model="teacherName" placeholder="请输入姓名" @input="inputHandle" />
                                    </template>
                                    <el-option v-for="item in filteredTeacherList " :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>

                            </div>
                            <div class="input_box">
                                <p class="pTitle"><span class="star">*</span>主办处室</p>
                                <el-tree-select v-model="checkedDepart1" :data="departmentList" multiple size="large"
                                    :class="{ 'select1': checkedDepart1.length <= 0, }" placeholder="请选择主办处室（可多选）"
                                    ref="departmentSelect" :render-after-expand="false" show-checkbox
                                    @change="changeDepart1" />
                            </div>
                        </div>
                        <div class="row flex">
                            <div class="input_box">
                                <p class="pTitle"><span class="star">*</span>来文部门</p>
                                <input type="text" placeholder="请填写来文部门" v-model="addFileForm.department">
                            </div>
                            <div class="input_box">
                                <p class="pTitle"><span class="star">*</span>配合部门</p>
                                <el-tree-select v-model="checkedDepart2" :data="departmentList" multiple size="large"
                                    :class="{ 'select1': checkedDepart1.length <= 0, }" placeholder="请选择配合部门（可多选）"
                                    ref="departmentSelect1" :render-after-expand="false" show-checkbox
                                    @change="changeDepart2" />

                            </div>
                        </div>
                        <div class="text_box">
                            <p class="pTitle">文字描述</p>
                            <div class="myTextarea">{{ addFileForm.documentDescription }}</div>
                        </div>

                        <div class="text_box">
                            <p class="pTitle"><span class="star">*</span>上传文件</p>
                            <div id="dropzone" @dragover.prevent @drop="handleDrop" @click="handleFileClick"
                                class="dropzone flex">
                                <div class="flex">
                                    <img src="../../assets/fileFlow_add.png" style="margin: 0 10px 0 20px;">
                                    <p class="tip">拖拽或点击上传文件</p>
                                </div>
                                <input type="file" ref="fileInput" accept=".xlsx,.xls,.doc,.docx,.pdf"
                                    style="display: none;" @change="handleFileSelect" />
                            </div>
                            <div class="file-list">
                                <div class="file_li" v-for="(file, index) in fileList" :key="index">
                                    <div class="fileBox">
                                        <img src="../../assets/fileFlow_doc.png"
                                            v-if="['doc', 'docx', 'DOC', 'DOCX'].includes(file.suffix)">
                                        <img src="../../assets/fileFlow_pdf.png"
                                            v-if="['PDF', 'pdf'].includes(file.suffix)">
                                        <img src="../../assets/fileFlow_xls.png"
                                            v-if="['XLS', 'XLSX', 'xls', 'xlsx'].includes(file.suffix)">
                                        <div>
                                            <p class="fileName">
                                                <el-text line-clamp="1" class="w-150px mb-2">{{ file.fileName
                                                    }}</el-text>
                                            </p>

                                            <!-- <p class="fileSize">{{ convertSize(file.size) }}</p> -->
                                        </div>
                                    </div>
                                    <el-icon @click="delFileHandle(index)">
                                        <Close />
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="contain_r" ref="divRight">
                        <div class="navBox">
                            <div class="nav" :class="{ 'nav_active': navActive == 0 }" @click="navActive = 0">公文反馈</div>
                            <div class="nav" :class="{ 'nav_active': navActive == 1 }" @click="navActive = 1">反馈详情</div>
                        </div>
                        <div class="contain_r_main" v-if="navActive == 0">
                            <div class="approveCard">
                                <div class="approve_header flex">
                                    <div class="flex">
                                        <div class="approve_number">1</div>
                                        <p class="approve_name">校长审批</p>
                                    </div>
                                    <div class="approve_time">时间：<span>暂无</span></div>
                                </div>
                                <p class="approve_status">待审批</p>
                                <div class="approve_time approve_content">审批意见：<span>暂无</span></div>
                                <div class="approve_time approve_content">公文内容：<span>暂无</span></div>
                            </div>
                            <div class="approveCard">
                                <div class="approve_header flex">
                                    <div class="flex">
                                        <div class="approve_number">1</div>
                                        <p class="approve_name">校长审批</p>
                                    </div>
                                    <div class="approve_time">时间：<span>暂无</span></div>
                                </div>
                                <p class="approve_status">待审批</p>
                                <div class="approve_time approve_content">审批意见：<span>暂无</span></div>
                                <div class="approve_time approve_content">公文内容：<span>暂无</span></div>
                            </div>
                        </div>
                        <div class="contain_r_main" style="background-color: #fff;" v-if="navActive == 1">
                            <div class="timelineBox">
                                <el-timeline style="max-width: 600px">
                                    <el-timeline-item timestamp="第一次提交反馈" placement="top">
                                        <div class="lineBox">
                                            <div class="flex" style="justify-content: space-between">
                                                <p class="lineBox_name">张三</p>
                                                <p class="lineBox_time">时间：暂无</p>
                                            </div>
                                            <div class="askRemark">反馈说明：啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
                                            <div class="line_file">
                                                <div class="line_fileName">文件</div>
                                                <div class="askFile flex">
                                                    <div class="flex" style="width: 90%; ">
                                                        <img src="../../assets/fileFlow_pdf1.png">
                                                        <p>{{ '时间段烦都烦死觉得啊啊啊啊啊啊啊啊' }}</p>
                                                    </div>
                                                    <el-icon>
                                                        <Download />
                                                    </el-icon>
                                                </div>
                                            </div>
                                            <div class="line_file">
                                                <div class="line_fileName">图片</div>
                                                <div class="askFile flex">
                                                    <div class="flex" style="width: 90%; ">
                                                        <img src="../../assets/fileFlow_pdf1.png">
                                                        <p>{{ '时间段烦都烦死觉得啊啊啊啊啊啊啊啊' }}</p>
                                                    </div>
                                                    <el-icon>
                                                        <Download />
                                                    </el-icon>
                                                </div>
                                            </div>
                                        </div>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="第二次提交反馈" placement="top">

                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </myDialog>
</template>

<script>
import { ref } from "vue";
import addImageView from "@/components/addImage.vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElLoading } from "element-plus";
import { formatTime } from "../../utils/dateFormat"
import { Close, CirclePlusFilled, Download } from "@element-plus/icons-vue";
import { vxRule } from "@/utils/validator";
import myDialog from "../commonModule/myDialog.vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
    name: "AddApp",
    components: { ElForm, addImageView, ElMessage, Close, myDialog, ElLoading, CirclePlusFilled, Download },
    setup() {
        return {
            locale: zhCn,
        }
    },
    data() {
        return {
            // imgg: "http://192.168.9.20/upload/2024-09-23/1727053313205_surveybg.2b92f2fa.png",
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            files: [], // 用于存储拖放的文件  
            dragOver: false, // 用于判断是否正在拖放文件上方  
            popupFlag: false,
            fileList: [],
            fileList1: [],
            fileList2: [],
            fullscreenLoading: false,

            departmentList: [],
            teacherList: [],
            checkedTeacher1: [],
            checkedTeacher2: [],
            checkedDepart1: [],
            checkedDepart2: [],
            value1: "",
            teacherName: "",
            leaderList: [],

            teacherFlag: false,
            departmentFlag1: false,
            departmentFlag2: false,
            warnRemark: "",
            navActive: 1,

            addFileForm: {
                id: "",
                documentTitle: "",
                documentNumber: "",
                department: "",
                receivedTime: "",
                coordinator: "",
                mainOffice: "",
                cooperatingDepartment: "",
                documentDescription: "",
                filePath: "",
            },
            // 校验规则
            addApprules: {
                comeName: vxRule(true, null, "blur"),
                comedepartName: vxRule(true, null, "blur"),
                comeFontSize: vxRule(true, null, "blur"),
                cpmeTime: vxRule(true, null, "blur"),
                coordinator: vxRule(true, null, "blur"),
                departmentName1: vxRule(true, null, "blur"),
                departmentName2: vxRule(true, null, "blur"),
                remark: vxRule(true, null, "blur"),
                file: vxRule(true, null, "blur"),
            },


        };
    },
    mounted() {
    },
    computed: {
        filteredTeacherList() {
            if (this.teacherName) {
                return this.teacherList.filter(item =>
                    item.label.includes(this.teacherName)
                );
            } else {
                return this.teacherList;
            }
        }
    },
    methods: {
        queryById(id) {
            httpService("/javaApi/docDocuments/queryById", { id: id }, "get").then((data) => {
                this.addFileForm = data
                this.checkedTeacher1 = this.addFileForm.coordinator.split(",")
                this.checkedDepart1 = this.addFileForm.mainOffice.split(",")
                this.checkedDepart2 = this.addFileForm.cooperatingDepartment.split(",")
                if (this.addFileForm.filePath) {

                    this.fileList = this.addFileForm.filePath.split(',').map(item => {
                        return {
                            url: item,
                            fileName: item.split(/_(.*)/)[1],
                            suffix: item.split(".")[1],
                        }
                    })
                }
                const buttonElement = this.$refs.departmentSelect.$el;
                if (this.checkedDepart1.length > 0 && buttonElement) {
                    buttonElement.classList.add('select2');
                }
                const buttonElement1 = this.$refs.departmentSelect1.$el;
                if (this.checkedDepart2.length > 0 && buttonElement1) {
                    buttonElement1.classList.add('select2');
                }
            });
        },


        closeHandle() {
            this.popupFlag = false
            this.clear()
        },

        clear() {
            this.dialogFormVisible = false;

            this.addFileForm.documentTitle = ""
            this.addFileForm.documentNumber = ""
            this.addFileForm.department = ""
            this.addFileForm.receivedTime = ""
            this.addFileForm.coordinator = ""
            this.addFileForm.mainOffice = ""
            this.addFileForm.cooperatingDepartment = ""
            this.addFileForm.documentDescription = ""
            this.addFileForm.filePath = ""
            this.teacherName = ""
            this.$refs.fileInput.value = ''
            this.$refs.departmentSelect1.blur()
            this.$refs.departmentSelect.blur()
            this.$refs.teacherTree.blur()

            this.fileList = []
            this.checkedTeacher1 = []
            this.checkedDepart1 = []
            this.checkedDepart2 = []

        },



    }

};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.main {
    width: 80vw;
    max-width: 1336px;
    min-width: 500px;
    min-height: 700px;
    background-color: #fff;
    background-color: #F3F4F6;
    border-radius: 5px;
    overflow: hidden;
}

.header {
    align-items: flex-start !important;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
    padding: 15px;
}

.header .el-icon {
    margin-right: 20px;
}

.title_box {
    color: #000;
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 1px;
}

.input_box {
    width: calc((100% - 40px) / 2);
}

.pTitle {
    color: #000;
    font-size: 15px;
    margin-bottom: 10px;
}

.myTextarea {
    width: calc(100% - 20px);
    padding: 12px 10px;
    border: 1px solid #E6E6E6;
    border-radius: 5px;
    color: #000;
    font-size: 13px;
}


.input_box input {
    width: calc(100% - 22px);
    border: 1px solid #E6E6E6;
    outline: none;
    background-color: #F5F5F5;
    height: 37px;
    font-size: 13px;
    color: #000;
    font-size: 13px;
    padding: 0 10px;
    border-radius: 5px;
}

.input_box input::placeholder {
    color: #999999;
}

.input_box .el-select {
    width: 100%;
    height: 37px;
}

.row {
    margin-top: 30px;
    justify-content: space-between;
    min-height: 50px;
}

.text_box {
    margin-top: 30px;
}

.text_box textarea {
    width: calc(100% - 20px);
    height: 80px;
    padding: 12px 10px;
    resize: none;
    outline: none;
    border: 1px solid #E6E6E6;
    border-radius: 5px;
}

.upload-demo {
    height: 50px;
}

.el-upload {
    height: 50px;
}

.el-upload-dragger {
    border: 1px solid #E6E6E6;
    height: 50px;
}

.dropzone {
    border: 1px solid #E6E6E6;
    height: 50px;
    border-radius: 5px;
}

.tip {
    color: #000;
    font-size: 13px;
}

.publishBox {
    margin: 40px 0 0;
    text-align: center;
}

.publish {
    width: 130px;
    height: 40px;
    background-color: #007EFF;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-size: 17px;
    border: none;
}

.select ::v-deep .el-tooltip__trigger {
    /* height: 37px; */
    width: 100%;
}

.select1 ::v-deep .el-tooltip__trigger {
    /* height: 37px; */
    background-color: #F5F5F5;
    width: 100%;
}

.select2 ::v-deep .el-tooltip__trigger {
    background-color: #fff;
    width: 100%;
}

.el-select-dropdown__item {
    padding-left: 15px;
}

.el-select {
    --el-color-primary: #FF7404;
}


.el-tooltip__trigger {
    height: 37px;
    background-color: #9b2f2f;
}






.file-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
}

.file_li {
    height: 75px;
    line-height: 30px;
    background-color: #F1F3F5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    border-radius: 5px;
}

.fileBox {
    display: flex;
    align-items: center;
}

.file_li img {
    margin-left: 14px;
    margin-right: 8px;
}

.file_li .el-icon {
    margin-right: 36px;
}


.fileName {
    color: #000000;
    font-size: 13px;
    line-height: 13px;
}

.fileSize {
    color: #999999;
    font-size: 13px;
    line-height: 13px;
    margin-top: 6px;
}


/* 修改日期选择器的样式 */
::v-deep .el-date-editor {
    --el-fill-color-blank: #F5F5F5 !important;
    --el-color-primary: #FF7404;
}

.star {
    color: #FF0000;
}


::v-deep .el-tag {
    background-color: #007EFF;
    color: #fff;
}

::v-deep .el-tag .el-icon {
    color: #FFF;
}
</style>


<style>
.contain {
    width: 100%;
    height: 100% !important;
    display: flex;
    flex-direction: row;
    align-content: stretch !important;
    align-items: stretch;
}

.contain_l {
    flex: 1;
    background-color: #fff;
    padding: 0px 25px 30px 15px;
    border-right: 1px solid #E5E5E5;
}

.contain_r {
    width: 25%;
    min-width: 200px;
}

.navBox {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    padding: 20px 25px 0;
    white-space: nowrap;
    cursor: pointer;
}

.nav {
    color: #000000;
    font-size: 17px;
    border-bottom: 3px solid transparent;
    padding-bottom: 6px;
    margin-right: 40px;
    transition: all 0.3s;
}

.nav_active {
    color: #007EFF !important;
    border-bottom: 3px solid #007EFF !important;
    transition: all 0.3s;
}

.contain_r_main {
    width: calc(100% - 20px);
    margin: 10px 10px 12px;
    border-radius: 5px;
    height: calc(100% - 80px) !important;
    position: relative;
}


.myTitle {
    width: 100%;
    padding-top: 20px;
    margin-bottom: 40px;
}

.myTitle p {
    width: 100%;
    color: #0061C4;
    padding-bottom: 6px;
    font-size: 16px;
}

.titleXian {
    width: 100%;
    height: 4px;
    background-color: rgba(0, 126, 255, 0.3);
    border-radius: 2px;
}

.titleXian1 {
    width: 95px;
    height: 6px;
    background-color: #007EFF;
    border-radius: 0 6px 0 6px;
    margin-top: -6px;
}

.approveCard {
    width: calc(100% - 62px);
    background-color: #fff;
    border-radius: 10px;
    margin: 10px 10px 15px;
    padding: 15px 23px 27px 20px;
}

.approve_header {
    justify-content: space-between;
}

.approve_number {
    width: 26px;
    line-height: 26px;
    background-color: #007EFF;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
    color: #fff;
}

.approve_name {
    color: #3A4958;
    font-size: 14px;
    margin-left: 8px;
}

.approve_time {
    color: #999999;
    font-size: 14px;
}

.approve_status {
    width: 49px;
    line-height: 23px;
    border-radius: 2px;
    background-color: #FFE8E8;
    color: #B51212;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    margin-top: 21px;
}

.approve_content {
    margin-top: 15px;
}

.timelineBox {
    margin: 0 5px 0 18px;
    padding-top: 22px;
}

.el-timeline-item__timestamp {
    color: #000000;
}

.lineBox_name {
    color: #000000;
    font-size: 14px;
}

.lineBox_time {
    color: #999999;
    font-size: 14px;
}

.lineBox {
    width: 100%;
    height: 400px;
    border-radius: 2px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    background-color: #F4F7FF;
    padding: 15px 11px 20px 15px;
}

.askRemark {
    margin: 10px 0;
    color: #666666;
    font-size: 14px;
}

.line_file {}

.line_fileName {
    margin-bottom: 9px;
    color: #666;
    font-size: 14px;
}

.askFile {
    background-color: #fff;
    padding: 7px 15px 7px 10px;
    justify-content: space-between;
}

.askFile img {
    width: 29px;
    height: 26px;
    margin-right: 5px;
}

.askFile p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>